<template>
  <view class="home-page">
    <!-- 首页弹窗 -->
    <view v-if="showPopup" class="popup-mask">
      <view class="popup-content">
        <text class="popup-text">{{ getValueByName('首页弹窗') || '欢迎使用自习室系统' }}</text>
        <button class="popup-btn" @click="showPopup = false">我知道了</button>
      </view>
    </view>

    <!-- WiFi信息弹窗 -->
    <view v-if="showWifiPopup" class="popup-mask">
      <view class="popup-content wifi-popup">
        <text class="popup-title">WiFi信息</text>
        <view class="wifi-popup-content">
          <text>账号：{{ getValueByName('WIFI账号') || '未设置' }}</text>
          <text>密码：{{ getValueByName('WIFI密码') || '未设置' }}</text>
        </view>
        <button class="popup-btn" @click="showWifiPopup = false">关闭</button>
      </view>
    </view>

    <!-- 客服信息弹窗 -->
    <view v-if="showServicePopup" class="popup-mask">
      <view class="popup-content service-popup">
        <text class="popup-title">联系客服</text>
        <view class="service-popup-content">
          <view class="wechat-info">
            <uni-icons type="weixin" size="24" color="#07C160"></uni-icons>
            <text class="wechat-text">客服微信号：{{ getValueByName('客服微信号') || '未设置' }}</text>
          </view>
          <image
              :src="getValueByName('客服微信二维码') || '/static/images/default-qrcode.png'"
              class="qrcode-img"
              mode="widthFix"
          ></image>
        </view>
        <button class="popup-btn" @click="showServicePopup = false">关闭</button>
      </view>
    </view>

    <!-- 自习室名称 -->
    <view class="room-name-container">
      <text class="room-name">{{ form.name || '自习室名称' }}</text>
    </view>

    <!-- 轮播图区域 -->
    <view class="swiper-wrapper">
      <swiper indicator-dots autoplay interval="3000" duration="500" circular>
        <swiper-item v-for="(item, index) in carouselImages" :key="index">
          <image
              :src="item.value"
              class="swiper-image"
              mode="aspectFill"
              lazy-load
          ></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 地址和联系电话 -->
    <view class="contact-card" @click="navigateTo('/pages/dt/dt')">
      <view class="info-item">
        <uni-icons type="location" size="24" color="#007aff"></uni-icons>
        <text class="info-text">{{ getValueByName('地址') || '暂无地址信息' }}</text>
      </view>
      <view class="info-item">
        <uni-icons type="phone" size="24" color="#007aff"></uni-icons>
        <text class="info-text">{{ getValueByName('电话') || '暂无联系电话' }}</text>
      </view>
    </view>

    <!-- 功能卡片 -->
    <view class="function-cards">
      <view class="function-card" @click="navigateTo('/pages/grid/grid')">
        <image src="/static/imgs/我的预约.png" class="function-card-img" mode="widthFix"></image>
        <text class="card-text">预约使用</text>
      </view>
      <view class="function-card" @click="handleClock">
        <image src="/static/imgs/打卡.png" class="function-card-img" mode="widthFix"></image>
        <text class="card-text">我要打卡</text>
      </view>
    </view>

    <!-- 小按钮 -->
    <view class="small-buttons">
      <button class="small-btn" @click="navigateTo('/pages/whoNb/whoNb')">
        <image src="/static/imgs/排行榜.png" class="small-btn-img" mode="widthFix"></image>
        <text>排行榜</text>
      </button>
      <button class="small-btn" @click="showWifiPopup = true">
        <image src="/static/imgs/wifi.png" class="small-btn-img" mode="widthFix"></image>
        <text>WiFi链接</text>
      </button>
      <button class="small-btn" @click="showServicePopup = true">
        <image src="/static/imgs/客服.png" class="small-btn-img" mode="widthFix"></image>
        <text>联系客服</text>
      </button>
      <button class="small-btn" @click="showPopup = true">
        <image src="/static/imgs/组件-弹窗.png" class="small-btn-img" mode="widthFix"></image>
        <text>首页弹窗</text>
      </button>
    </view>

    <!-- 状态、介绍和营业时间 -->
    <view class="info-card">
      <view class="status-container">
        <text class="room-status" :class="form.status === '营业中' ? 'open' : 'closed'">
          {{ form.status || '未知状态' }}
        </text>
      </view>

      <view class="room-description">
        <text>{{ form.content || '暂无自习室介绍' }}</text>
      </view>

      <view class="info-item">
        <uni-icons type="clock" size="22" color="#666"></uni-icons>
        <text class="info-text">营业时间：{{ formatTime(form.time1) }} - {{ formatTime(form.time2) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: null,
      tableData: [],
      form: {},
      originalData: {},
      showPopup: false,
      showWifiPopup: false,
      showServicePopup: false
    };
  },
  onShow() {
    this.loadValue();
    this.loadRoom();
  },
  computed: {
    carouselImages() {
      const carouselItems = this.tableData.filter(item =>
          item.name && item.name.includes('轮播图')
      );
      return carouselItems.sort((a, b) => {
        const numA = parseInt(a.name.replace(/\D/g, '')) || 0;
        const numB = parseInt(b.name.replace(/\D/g, '')) || 0;
        return numA - numB;
      });
    }
  },
  methods: {
    loadValue() {
      this.$request.get('/sysValue/selectAll')
          .then(res => {
            this.tableData = res.data || [];
          })
          .catch(err => {
            console.error('加载系统配置失败:', err);
          });
    },
    loadRoom() {
      this.$request.get('/sysRoom/selectPage', {
        params: { pageNum: 1, pageSize: 1 }
      }).then(res => {
        this.form = res.data?.list[0] || {};
        this.originalData = JSON.parse(JSON.stringify(this.form));
        // 只有拿到数据才显示首页弹窗
        if (this.form && Object.keys(this.form).length > 0) {
          this.showPopup = true;
        }
      }).catch(err => {
        console.error('加载自习室信息失败:', err);
      });
    },
    getValueByName(name) {
      const item = this.tableData.find(item => item.name === name);
      return item ? item.value : '';
    },
    formatTime(timeStr) {
      if (!timeStr) return '未知';
      return timeStr.split(' ')[1]?.substring(0, 5) || '未知';
    },
    navigateTo(path) {
      uni.navigateTo({
        url: path,
        fail: () => {
          uni.showToast({ title: '页面跳转失败', icon: 'none' });
        }
      });
    },
    handleClock() {
      uni.showLoading({ title: '打卡中...' });
      this.$request.post('/clock/add')
          .then(res => {
            if (res.code === '200') {
              uni.showToast({ title: '打卡成功！', icon: 'success' });
            } else {
              uni.showToast({ title: res.msg || '打卡失败', icon: 'none' });
            }
          })
          .catch(err => {
            console.error('打卡失败:', err);
            uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
          })
          .finally(() => {
            uni.hideLoading();
          });
    }
  }
};
</script>

<style scoped>
.home-page {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 弹窗通用样式 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;
  box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.2);
}

.popup-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.popup-text {
  font-size: 32rpx;
  color: #333;
  display: block;
  margin-bottom: 30rpx;
  line-height: 50rpx;
}

.popup-btn {
  background-color: #007aff;
  color: #fff;
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  border-radius: 35rpx;
  margin-top: 20rpx;
}

/* WiFi弹窗特殊样式 */
.wifi-popup-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  font-size: 28rpx;
  color: #666;
}

/* 客服弹窗特殊样式 */
.service-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  font-size: 28rpx;
  color: #666;
}

.wechat-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.wechat-text {
  margin-left: 15rpx;
}

.qrcode-img {
  width: 200rpx;
  height: 200rpx;
  border: 1rpx solid #eee;
  padding: 10rpx;
}

/* 自习室名称 - 单独一排 */
.room-name-container {
  padding: 20rpx;
}

.room-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 轮播图样式 */
.swiper-wrapper {
  width: 100%;
  margin: 0 0 20rpx 0;
}

.swiper-image {
  width: 100%;
  height: 450rpx;
  display: block;
}

/* 状态、介绍和营业时间卡片 */
.info-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 0 20rpx 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.status-container {
  margin-bottom: 20rpx;
}

.room-status {
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

.room-status.open {
  background-color: #e6f7ef;
  color: #07c160;
}

.room-status.closed {
  background-color: #fff2f0;
  color: #ff4d4f;
}

.room-description {
  font-size: 26rpx;
  color: #666;
  line-height: 40rpx;
  margin-bottom: 25rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f1f1f1;
}

/* 地址和联系电话卡片 */
.contact-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 0 20rpx 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 功能卡片区域 - 统一淡粉色 */
.function-cards {
  display: flex;
  gap: 20rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}

.function-card {
  flex: 1;
  background-color: #b0ebff; /* 淡粉色 */
  border-radius: 20rpx;
  padding: 30rpx 0;
  text-align: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 220rpx;
}

.function-card-img {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 20rpx;
}

.card-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 小按钮区域 - 无底色 */
.small-buttons {
  display: flex;
  gap: 15rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}

.small-btn {
  flex: 1;
  background-color: transparent; /* 无底色 */
  color: #333; /* 文字颜色改为深色 */
  border-radius: 15rpx;
  padding: 15rpx 0;
  font-size: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8rpx;
}

.small-btn-img {
  width: 40rpx;
  height: 40rpx;
}

/* 信息项样式 */
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  font-size: 26rpx;
  color: #666;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-text {
  margin-left: 15rpx;
  line-height: 40rpx;
  flex: 1;
}
</style>
